/**
 * Description:
 * Created by Administrator on 2016/10/5.
 */
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    centerX = canvas.width / 2,
    centerY = canvas.height / 2,
    rad = Math.PI * 2 / 100,
    speed = 0.1;

//center text
function text(n) {
    ctx.font = "20px Arial";
    ctx.strokeStyle = "#49f";
    var text = parseInt(n, 10) + "%";
    ctx.strokeText(text, centerX - 25, centerY + 10);
}

function innerCircle() {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = "#f00";
    ctx.arc(centerX, centerY, 100, 0, Math.PI * 2);
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

function outerCircle(n) {
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 5;
    ctx.strokeStyle = "#49f";
    ctx.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false);//clockwise
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

function drawFrame() {
    window.requestAnimationFrame(drawFrame);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // debugger;
    innerCircle();
    text(speed);
    outerCircle(speed);
    if (speed > 100) speed = 0;
    speed += 0.1;
}

// drawFrame();